<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>排行榜</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/font/iconfont.css">
</head>

<body>


<link type="text/css" rel="stylesheet" href="/css/rank.css" />
<div  id="rank">
	<div class="header-top" id="loginDiv">
		<div class="auto-width">
			<ul class="header-guide fl" style="width: 300px">
				<li class="guide-item">
					<a href="/">首页</a>
				</li>
				<li class="guide-item">
					<a href="http://localhost:9999/search?tagId=0">分类</a>
				</li>
				<li class="guide-item">
					<a href="http://localhost:9999/rankList">排行榜</a>
				</li>
			</ul>
			<div class="search-box fl">
				<form action="http://localhost:9999/search?" method="get">
					<input type="text" class="fl search-text" placeholder="请输入漫画名" name="name">
					<button class="fl search-btn">
						<i class="iconfont icon-search"></i>
					</button>
				</form>
			</div>
			<ul class="header-guide fr" style="width: 300px">
				<!--登录注册-->
				<li v-if="!loginUser.username" class="guide-item">
					<a href="http://localhost:9999/login">登录/注册</a>
				</li>
				<li class="guide-item login"  v-if="loginUser.username">
					<a  :href="'http://localhost:9999/person?loginUser.id'">
						<img :src="'http://localhost:8081/Imgs/headImg/'+loginUser.avatar" style="width: 40px;height: 40px;position:relative; top:4px;vertical-align: top;">&nbsp;&nbsp;
						{{loginUser.username}}
					</a>
				</li>
				<li class="guide-item history" v-if="loginUser.username">
					<a href="" @click="userExit()">退出</a>
				</li>
			</ul>
		</div>
	</div>
	
	<div class="clearfix">
		<div class="s-index-side">

			<div class="title" style="background-color: powderblue">
				<h3>月票榜</h3>
				<span class="s-index-icon game-top10-icon">icon图标</span>
			</div>

			<ul class="weekly-list cls">
				<li class="resourceInfo" v-for="(m,index) in monthList" :key="index" v-if="index==0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+m.id">{{m.name}}</a>
					</div>
					<div>
						<div class="img">
							<img :src="'http://localhost:8081/imgs/resource/'+m.id+'/'+m.cover" width="75px" height="100px"/>
						</div>
						<div class="info">
							<p>{{m.tag}}</p>
							<p>{{m.writer}}</p>
							<p>月票数&nbsp;{{m.ticketNum}}</p>
							<p v-if="m.sectionList">跟新至:{{m.sectionList.name}}</p>
						</div>
					</div>
				</li>
				<li v-for="(m,index) in monthList" :key="index" v-if="index!=0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+m.id">{{m.name}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<span>月票数&nbsp;{{m.ticketNum}}</span>
					</div>
				</li>
			</ul>

		</div>
		<div class="s-index-side">

			<div class="title" style="background-color: powderblue">
				<h3>畅销榜</h3>
				<span class="s-index-icon game-top10-icon">icon图标</span>
			</div>

			<ul class="weekly-list cls">
				<li class="resourceInfo" v-for="(b,index) in buyList" :key="index" v-if="index==0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+b.id">{{b.name}}</a>
					</div>
					<div>
						<div class="img">
							<img :src="'http://localhost:8081/imgs/resource/'+b.id+'/'+b.cover" width="75px" height="100px"/>
						</div>
						<div class="info">
							<p>{{b.tag}}</p>
							<p>{{b.writer}}</p>
							<p>购买数&nbsp;{{b.buyCount}}</p>
							<p v-if="b.sectionList">跟新至:{{b.sectionList.name}}</p>
						</div>
					</div>
				</li>
				<li v-for="(b,index) in buyList" :key="index" v-if="index!=0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+b.id">{{b.name}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<span>购买数&nbsp;{{b.buyCount}}</span>
					</div>
				</li>
			</ul>

		</div>
		<div class="s-index-side">

			<div class="title" style="background-color: powderblue">
				<h3>收藏榜</h3>
				<span class="s-index-icon game-top10-icon">icon图标</span>
			</div>

			<ul class="weekly-list cls">
				<li class="resourceInfo" v-for="(c,index) in collectList" :key="index" v-if="index==0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+c.id">{{c.name}}</a>
					</div>
					<div>
						<div class="img">
							<img :src="'http://localhost:8081/imgs/resource/'+c.id+'/'+c.cover" width="75px" height="100px"/>
						</div>
						<div class="info">
							<p>{{c.tag}}</p>
							<p>{{c.writer}}</p>
							<p>收藏量&nbsp;{{c.collectionCount}}</p>
							<p v-if="c.sectionList">跟新至:{{c.sectionList.name}}</p>
						</div>
					</div>
				</li>
				<li v-for="(c,index) in collectList" :key="index" v-if="index!=0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+c.id">{{c.name}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<span>收藏量&nbsp;{{c.collectionCount}}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="ad">
		<img src="/images/cont/ad1.jpg" style="padding-left: 320px"/>
	</div>
	<div class="clearfix">
		<div class="s-index-side">

			<div class="title" style="background-color: powderblue">
				<h3>红票榜</h3>
				<span class="s-index-icon game-top10-icon">icon图标</span>
			</div>

			<ul class="weekly-list cls">
				<li class="resourceInfo" v-for="(r,index) in redList" :key="index" v-if="index==0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+r.id">{{r.name}}</a>
					</div>
					<div>
						<div class="img">
							<img :src="'http://localhost:8081/imgs/resource/'+r.id+'/'+r.cover" width="75px" height="100px"/>
						</div>
						<div class="info">
							<p>{{r.tag}}</p>
							<p>{{r.writer}}</p>
							<p>红票数&nbsp;{{r.red}}</p>
							<p v-if="r.sectionList">跟新至:{{r.sectionList.name}}</p>
						</div>
					</div>
				</li>
				<li v-for="(r,index) in redList" :key="index" v-if="index!=0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+r.id">{{r.name}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<span>红票数&nbsp;{{r.red}}</span>
					</div>
				</li>
			</ul>

		</div>
		<div class="s-index-side">

			<div class="title" style="background-color: powderblue">
				<h3>男生榜</h3>
				<span class="s-index-icon game-top10-icon">icon图标</span>
			</div>

			<ul class="weekly-list cls">
				<li class="resourceInfo" v-for="(b,index) in boyList" :key="index" v-if="index==0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+b.id">{{b.name}}</a>
					</div>
					<div>
						<div class="img">
							<img :src="'http://localhost:8081/imgs/resource/'+b.id+'/'+b.cover" width="75px" height="100px"/>
						</div>
						<div class="info">
							<p>{{b.tag}}</p>
							<p>{{b.writer}}</p>
							<p>收藏量&nbsp;{{b.collectionCount}}</p>
							<p v-if="b.sectionList">跟新至:{{b.sectionList.name}}</p>
						</div>
					</div>
				</li>
				<li v-for="(b,index) in boyList" :key="index" v-if="index!=0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+b.id">{{b.name}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<span>收藏量&nbsp;{{b.collectionCount}}</span>
					</div>
				</li>
			</ul>

		</div>
		<div class="s-index-side">

			<div class="title" style="background-color: powderblue">
				<h3>女生榜</h3>
				<span class="s-index-icon game-top10-icon">icon图标</span>
			</div>

			<ul class="weekly-list cls">
				<li class="resourceInfo" v-for="(g,index) in girlList" :key="index" v-if="index==0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+g.id">{{g.name}}</a>
					</div>
					<div>
						<div class="img">
							<img :src="'http://localhost:8081/imgs/resource/'+g.id+'/'+g.cover" width="75px" height="100px"/>
						</div>
						<div class="info">
							<p>{{g.tag}}</p>
							<p>{{g.writer}}</p>
							<p>收藏量&nbsp;{{g.collectionCount}}</p>
							<p v-if="g.sectionList">跟新至:{{g.sectionList.name}}</p>
						</div>
					</div>
				</li>
				<li v-for="(g,index) in girlList" :key="index" v-if="index!=0">
					<div>
						<span class="num s-index-org">{{index+1}}.</span>
						<a :href="'http://localhost:9999/comicDetail?id='+g.id">{{g.name}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<span>收藏量&nbsp;{{g.collectionCount}}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<!---------- 底部内容 ---------->
<div id="footer">
	<div class="container auto-width">
		<div class="footer-top clearfix">
			<div class="footer-nav fl">
				<div class="item">
					<h4>合作</h4>
					<p>
						<a href="#">关于我们</a>
						<a href="#">联系我们</a>
						<br>
						<a href="#">AC招聘</a>
					</p>
				</div>
				<span class="line"></span>
				<div class="item">
					<h4>官方</h4>
					<p>
						<a href="#">新浪微博</a>
						<a href="#">官方网店</a>
						<br>
						<a href="#">微信公众号<img src="/images/footer-arcode.jpg" class="footer-orcode" alt="#"></a>
					</p>
				</div>
				<span class="line"></span>
				<div class="item">
					<h4>下载</h4>
					<p>
						<a href="#" class="mg-0">移动客户端</a>
						<span class="new">new</span>
						<br>
						<a href="#">AC娘表情包</a>
					</p>
				</div>
				<span class="line"></span>
				<div class="item">
					<h4>友情链接</h4>
					<p>
						<a href="#">斗鱼直播</a>
						<a href="#">匿名版</a>
						<br>
						<a href="#">AC大逃杀</a>
					</p>
				</div>
				<span class="line"></span>
				<div class="item">
					<h4>反馈</h4>
					<p>
						<a href="#">意见反馈</a>
						<a href="#">举报</a>
						<a href="#">帮助中心</a>
						<br>
						<a href="#">免责声明</a>
						<a href="#">用户协议</a>
					</p>
				</div>
			</div>
			<div class="footer-img fr">
				<img src="/images/footer-logo.gif" alt="#">
			</div>
		</div>
		<div class="footer-middle clearfix">
			<div class="item">
				<a href="#"><i class="icon icon-1"></i>中国互联网举报中心</a>
				<a href="#"><i class="icon icon-2"></i>网络文化经营单位</a>
			</div>
			<div class="item">
				<span>京8888888888号</span>
			</div>
			<div class="item">
				<span>节目制作经营许可证66666666666号</span>

			</div>
		</div>
		<div class="footer-bottom">
			<img src="/images/logo-gray.png" alt="#">
			<p>本站不提供任何视听上传服务，所有内容均来自视频分享站点所提供的公开引用资源。********</p>
		</div>
	</div>
</div>

<a href="javascript:;" id="back_top" class="iconfont icon-up"></a>


<script>
	let rankApp=new Vue({
		el:"#rank",
		data:{
			loginUser:{
				id:'',
				username : '',
				avatar:'',
			},
			monthList:[],
			buyList:[],
			collectList:[],
			redList:[],
			boyList:[],
			girlList:[],
		},
		methods:{
		//获得畅销榜
		getMonthList(){
			let url = 'http://localhost:9999/resource/listByMonth'
			axios.get(url,{
				params:{
					num:10
				}
			}).then((resp)=>{
				this.monthList=resp.data.data
				})
			},
		getBuyList(){
				let url = 'http://localhost:9999/resource/listBuy'
				axios.get(url,{
					params:{
						num:10
					}
				}).then((resp)=>{
					this.buyList=resp.data
				})
			},
		getCollectList(){
			let url = 'http://localhost:9999/resource/listByCollect'
				axios.get(url,{
					params:{
						num:10
					}
				}).then((resp)=>{
					this.collectList=resp.data.data
				})
			},
		getRedList(){
				let url = 'http://localhost:9999/resource/listRed'
				axios.get(url,{
					params:{
						num:10
					}
				}).then((resp)=>{
					this.redList=resp.data
				})
			},
		getBoyList(){
				let url = 'http://localhost:9999/resource/listSex'
				axios.get(url,{
					params:{
						num:1
					}
				}).then((resp)=>{
				this.boyList=resp.data.data
				})
			},
		getGirlList(){
				let url = 'http://localhost:9999/resource/listSex'
				axios.get(url,{
					params:{
						num:0
					}
				}).then((resp)=>{
					this.girlList=resp.data.data
				})
			},
			// 初始化用户数据
			initUser(){
				let url = "http://localhost:9999/user/getLoginUser";
				axios.get(url).then(res=>{
					if (res.data.code == 200){
						this.loginUser=res.data.data;
					}
				})
			},
			//退出登录
			userExit(){
				let url= "http://localhost:9999/user/logout"
				axios.get(url).then((resp)=>{
					if (resp.data!=200){
						alert("网络繁忙请稍后重试")
					}else {
						location.reload()
					}
				})
			},
		},
	

		created(){
		this.getMonthList();
		this.getBuyList();
		this.getCollectList();
		this.getRedList();
		this.getBoyList();
		this.getGirlList()
		this.initUser();
		}
	})

</script>

</body>
</html>/
